let videoFileInput = document.getElementById('videoFileInput')
let videoPreview = document.getElementById('selected_priview')
let stepPrevious = document.getElementById('step_previous')
let stepNext = document.getElementById('step_next')
let stepProgress = document.getElementById('step_progress')
let formOperation_1 = document.getElementById('form_operation_1')
let formOperation_2 = document.getElementById('form_operation_2')
let formOperation_3 = document.getElementById('form_operation_3')
let coverImgInput = document.getElementById('cover_img')
let step2CheckOut = document.getElementsByClassName('cover_way')
let videoTitleInput = document.getElementById('videoTitleInput')
let videoDescInput = document.getElementById('videoDescInput')
let uploadProgress = document.getElementById('circle_progress_bg')
let uploadProgressText = document.getElementById('circle_num')
let fileAttach

let currentStep = 1
let coverWay = 1
let step1OK = false
let step2OK = false
let step3OK = false
let objVideoSuffix
let objImgSuffix
let readyFile
let coverFile

let menuList = document.querySelectorAll('.side_menu li')
let menuLength = menuList.length
let infoFormList = document.querySelectorAll('.info_form')
getAllVideo()
for (let i = 0; i < menuLength; i++) {
    menuList[i].addEventListener('click', function () {
        Array.from(menuList).forEach(element => {
            element.classList.remove('active')
        })
        Array.from(infoFormList).forEach(element => {
            element.classList.remove('active')
        })
        infoFormList[i].classList.add('active')
        menuList[i].classList.add('active')
    })
}
for (let i = 0; i < 3; i++) {
    step2CheckOut[i].addEventListener('change', function () {
        if (i == 0) {
            if (coverImgInput.value == '') {
                stepNext.setAttribute('disabled', '')
                stepNext.classList.remove('step_active')
                step2OK = false
                coverWay = 1
                return
            }
        }
        coverWay = i + 1
        step2OK = true
        stepNext.removeAttribute('disabled')
        stepNext.classList.add('step_active')
    })
}

document.getElementById('open_up_window').addEventListener('click', function () {
    document.getElementById('window_upload').style.display = 'flex'
})

document.getElementById('step_close').addEventListener('click', function () {
    document.getElementById('window_upload').style.display = 'none'
})

coverImgInput.addEventListener('change', function () {
    let tempFile = coverImgInput.files[0]
    if (tempFile.size > 1576000) {
        alert('文件过大，建议文件大小在1.5MB已内')
        coverImgInput.value = ''
        coverFile = undefined
        step2OK = false
        objImgSuffix = undefined
        document.getElementById('cover_local_preview').setAttribute('src', '')
        stepNext.setAttribute('disabled', '')
        stepNext.classList.remove('step_active')
        return
    }
    let urlData = window.URL.createObjectURL(tempFile)
    document.getElementById('cover_local_preview').setAttribute('src', urlData)
    objImgSuffix = tempFile.name.substring(tempFile.name.lastIndexOf('.' + 1, tempFile.name.length))
    coverFile = tempFile
    step2OK = true
    stepNext.removeAttribute('disabled')
    stepNext.classList.add('step_active')
})

document.getElementById('btn_read_upload').addEventListener('click', function () {
    let temp1 = videoTitleInput.value
    let temp2 = videoDescInput.value
    if (temp1 == '' || temp2 == '') {
        step3OK = false
        if (fileAttach != undefined) {
            fileAttach.videoTitle = ''
            fileAttach.videoDescription = ''
        }
        alert('请先完善视频信息')
        return
    } else {
        step3OK = true
        fileAttach = {
            videoTitle: temp1,
            videoDescription: temp2,
            videoCoverWay: coverWay,
            videoSolution: '',
            videoDuration: Math.floor(videoPreview.duration)
        }
        switch (coverWay) {
            case 1:
                fileAttach.videoSolution = 'file'
                break;
            case 2:
                fileAttach.videoSolution = Math.floor(document.getElementById('selected_priview_2').currentTime)
                break;
            case 3:
                fileAttach.videoSolution = 'random time'
                break;
        }
        document.getElementById('window_upload').style.display = 'none'
    }
    uploadVidoe()
})

videoFileInput.addEventListener('change', function () {
    let tempFile = videoFileInput.files[0]
    if (tempFile.size > 367401256) {
        alert('文件过大，建议文件大小在360MB已内')
        videoFileInput.value = ''
        objVideoSuffix = undefined
        step1OK = false
        readyFile = undefined
        stepNext.setAttribute('disabled', '')
        stepNext.classList.remove('step_active')
        videoPreview.setAttribute('src', '')
        return
    }
    let urlData = window.URL.createObjectURL(tempFile)
    videoPreview.setAttribute('src', urlData)
    document.getElementById('selected_priview_2').setAttribute('src', urlData)
    stepNext.removeAttribute('disabled')
    stepNext.classList.add('step_active')
    step1OK = true
})

stepNext.addEventListener('click', function () {
    stepController(true)
})
stepPrevious.addEventListener('click', function () {
    stepController(false)
})

function stepController(flag) {
    switch (flag) {
        case true:
            switch (currentStep) {
                case 1:
                    if (step1OK) {
                        currentStep = 2
                        stepPrevious.removeAttribute('disabled')
                        stepProgress.style.width = '66.66%'
                        stepProgress.textContent = '2、选择视频封面'

                        formOperation_2.style.display = 'block'
                        formOperation_1.style.display = 'none'
                        formOperation_3.style.display = 'none'

                        if (!step2OK) {
                            stepNext.classList.remove('step_active')
                            stepNext.setAttribute('disabled', true)
                        }
                    }
                    break
                case 2:
                    if (step2OK) {
                        currentStep = 3
                        stepNext.setAttribute('disabled', true)
                        stepProgress.style.width = '90%'
                        stepProgress.textContent = '3、完善视频信息'

                        formOperation_2.style.display = 'none'
                        formOperation_1.style.display = 'none'
                        formOperation_3.style.display = 'block'

                        stepNext.setAttribute('disabled', '')
                        stepNext.classList.remove('step_active')
                    }
                    break
            }
            break
        case false:
            switch (currentStep) {
                case 2:
                    currentStep = 1
                    stepProgress.style.width = '33.33%'
                    stepPrevious.setAttribute('disabled', true)
                    stepProgress.textContent = '1、选择要上传的视频'

                    formOperation_2.style.display = 'none'
                    formOperation_1.style.display = 'block'
                    formOperation_3.style.display = 'none'
                    if (step1OK) {
                        stepNext.removeAttribute('disabled')
                        stepNext.classList.add('step_active')
                    }
                    break
                case 3:
                    currentStep = 2
                    stepProgress.style.width = '66.66%'
                    stepProgress.textContent = '2、选择视频封面'
                    stepNext.removeAttribute('disabled')
                    stepNext.classList.add('step_active')

                    formOperation_2.style.display = 'block'
                    formOperation_1.style.display = 'none'
                    formOperation_3.style.display = 'none'
                    break
            }
            break
    }
}

function getAllVideo() {
    fetch('/user/user_video', {method: 'get'}).then(resp => {
        resp.json().then(videoData => {
            new Vue({
                el: '#works_list',
                data: {
                    videoList: videoData,
                    amountOfAll: videoData.length
                }, mounted: function () {

                }
            })
        })
    }).catch(err => {
        console.log('获取视频列表失败：' + err)
    })
}

fetch('/user/get_user_info', {method: 'get'}).then(resp => {
    resp.json().then(data => {
        console.log(data)
        document.getElementById('avatar_title').textContent = data.userName
        document.getElementById('avatar_description').textContent = data.description
        document.getElementById('avatar_img').setAttribute('src', data.avatar)
        document.getElementById('header').style.backgroundImage = data.banner
    })
}).catch(err => {
})

function uploadVidoe() {
    //console.log(fileAttach)
    let fordata = new FormData()
    fordata.append('videoFile', videoFileInput.files[0])
    if (fileAttach.videoCoverWay == 1) {
        fordata.append('coverImg', coverImgInput.files[0])
    }
    document.getElementById('upload_queue_title').textContent = fileAttach.videoTitle
    fordata.append('fileAttach', JSON.stringify(fileAttach))
    //console.log(fordata)
    uploadProgress.style.backgroundColor = 'var(--theme_color)'
    axios({
        method: 'post',
        url: '/user/upload_video',
        data: fordata,
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: function (progressEvent) {
            let currentPercent = Math.floor(progressEvent.loaded / progressEvent.total * 100)
            uploadProgress.style.height = currentPercent + '%'
            uploadProgressText.textContent = currentPercent + '%'
        }
    }).then(resp => {
        //console.log(resp.data)
        if (resp.data.upload_result) {
            uploadProgress.style.backgroundColor = '#8bc34a'
            uploadProgressText.textContent = '完成'
        }

    }).then(err => {
        console.log(err)
    })
}